<template>
  <a-card :bordered="false">
    <div class="card-title">{{ $route.meta.title }}</div>
    <a-spin :spinning="isLoading">
      <a-form :form="form" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-form-item label="优惠券名称">
          <a-input
              v-decorator="['couponName', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
              placeholder="请输入优惠券名称"
              disabled
          />
        </a-form-item>
        <a-form-item label="优惠券类型">
          <a-radio-group
              v-decorator="['couponType', { initialValue: CouponType.REDUCTION.key, rules: [{ required: true }] }]"
              disabled
          >
            <a-radio v-for="(item, index) in CouponType.data" :key="index" :value="item.key">
              {{ item.name }}
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <div v-show="form.getFieldValue('couponType') == CouponType.REDUCTION.key">
          <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="优惠金额"
          >
            <a-input-number
                v-decorator="['amount', { rules: [{ required: true, message: '请输入优惠金额' }] }]"
                :min="0.01"
                :precision="2"
                disabled
            />
            <span class="ml-5">元</span>
          </a-form-item>
          <a-form-item label="满减条件">
            <a-input-number
                v-decorator="['full', { rules: [{ required: true, message: '请输入满减条件金额' }] }]"
                :min="1"
                :precision="2"
                disabled
            />
            <span class="ml-5">元</span>
          </a-form-item>
        </div>
        <a-form-item
            v-show="form.getFieldValue('couponType') == CouponType.DISCOUNT.key"
            label="折扣率"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
        >
          <a-input-number
              disabled
              :min="0"
              :max="9.9"
              :precision="1"
              v-decorator="['discount', { initialValue: 9.9, rules: [{ required: true, message: '请输入折扣率' }] }]"
          />
          <span class="ml-5">%</span>
          <p class="form-item-help">
            <small>折扣率范围 0-9.9，8代表打8折，0代表不折扣</small>
          </p>
        </a-form-item>
        <a-form-item label="活动时间">
          <a-range-picker
              v-decorator="['receiveTime', { initialValue: defaultDate, rules: [{ required: true, message: '请选择有效期范围' }] }]"
              disabled
              format="YYYY-MM-DD hh:mm:ss"
          />
        </a-form-item>
        <a-form-item label="使用时间">
          <a-range-picker
              v-decorator="['useTime', { initialValue: defaultDate, rules: [{ required: true, message: '请选择有效期范围' }] }]"
              disabled
              format="YYYY-MM-DD hh:mm:ss"
          />
        </a-form-item>
        <a-form-item label="券适用范围">
          <a-radio-group
              v-decorator="['useScope', { initialValue: ApplyRange.ALL_PRODUCTS.key, rules: [{ required: true }] }]"
              disabled
          >
            <a-radio
                v-for="(item, index) in ApplyRange.data" :key="index" :value="item.key">
              {{ item.name }}
            </a-radio>
          </a-radio-group>
          <a-form-item v-if="form.getFieldValue('useScope') != ApplyRange.ALL_PRODUCTS.key">
            <SelectProduct
                v-decorator="['scopeConfig', { rules: [{ required: true, message: '请选择适用的商品' }] }]"
                :defaultList="goodsList"
                disabled
            />
          </a-form-item>
        </a-form-item>
        <a-form-item label="发放总数量">
          <a-input-number
              v-decorator="['receiveNum', { initialValue: 100, rules: [{ required: true, message: '请输入发放总数量' }] }]"
              :min="1"
              :precision="0"
              disabled
          />
          <span class="ml-5">张</span>
          <p class="form-item-help">
            <small>发放的优惠券总数量</small>
          </p>
        </a-form-item>
        <a-form-item label="每人可领取张数">
          <a-input-number
              v-decorator="['receiveNumLimit', { initialValue: 1, rules: [{ required: true, message: '请输入发放总数量' }] }]"
              :min="1"
              :precision="0"
              disabled
          />
          <span class="ml-5">张</span>
          <p class="form-item-help">
            <small>发放的优惠券总数量，-1为不限制</small>
          </p>
        </a-form-item>
        <a-form-item label="优惠券描述">
          <a-textarea v-decorator="['describe']" :autoSize="{ minRows: 4 }" disabled/>
        </a-form-item>
        <a-form-item label="排序" extra="数字越小越靠前">
          <a-input-number
              disabled
              :min="0"
              v-decorator="['sort', { initialValue: 100, rules: [{ required: true, message: '请输入排序值' }] }]"
          />
        </a-form-item>
        <a-form-item class="mt-20" :wrapperCol="{ span: wrapperCol.span, offset: labelCol.span }">
          <a-button @click="handleGoback">返回</a-button>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-card>
</template>

<script>
import moment from 'moment'
import {get, pick} from 'lodash'
import * as Api from '@/api/market/coupon'
import * as ProductApi from '@/api/product'
import {getBetweenTime, isEmpty} from '@/utils/util'
import {InputNumberGroup, SelectProduct} from '@/components'
import {ApplyRangeEnum, CouponTypeEnum} from '@/common/enum/coupon'

export default {
  components: {
    SelectProduct,
    InputNumberGroup
  },
  data() {
    return {
      // 正在加载
      isLoading: false,
      // 标签布局属性
      labelCol: {span: 3},
      // 输入框布局属性
      wrapperCol: {span: 10},
      // 当前表单元素
      form: this.$form.createForm(this),
      // 默认日期范围
      defaultDate: [moment(), moment()],
      // 优惠券ID
      couponId: null,
      // 当前记录
      record: {},
      // 商品列表
      goodsList: []
    }
  },
  async created() {
    // 记录优惠券ID
    this.couponId = this.$route.query.id
    // 获取当前记录
    await this.getDetail()
    // 获取适用范围：指定的商品
    await this.getContainGoodsList()
  },
  computed: {
    CouponType() {
      return CouponTypeEnum
    },
    ApplyRange() {
      return ApplyRangeEnum
    }
  },
  methods: {

    // 获取当前记录
    async getDetail() {
      const {couponId} = this
      this.isLoading = true
      await Api.detail(couponId)
          .then(result => {
            // 当前记录
            this.record = result
            // 设置表单默认值
            this.setFieldsValue()
          })
          .finally(() => this.isLoading = false)
    },

    // 获取指定的商品列表
    async getContainGoodsList() {
      const {record} = this
      const skuList = get(record, 'scopeConfig.products')
      console.log(skuList)
      if (skuList !== undefined && skuList.length) {
        this.isLoading = true
        await ProductApi.listBySku(skuList)
            .then(result => this.goodsList = result.items)
            .finally(result => this.isLoading = false)
      }
    },

    // 设置表单默认值
    setFieldsValue() {
      const {record, form, $nextTick} = this
      // 设置表单内容
      !isEmpty(form.getFieldsValue()) && $nextTick(() => {
        // 表单数据
        const data = pick(record, [
          'couponName', 'couponType', 'amount', 'discount', 'full', 'useScope',
          'scopeConfig', 'receiveNum', 'receiveNumLimit', 'describe', 'sort'
        ])
        // 时间范围
        data.receiveTime = getBetweenTime([record.receiveStart, record.receiveEnd])
        data.useTime = getBetweenTime([record.useStart, record.useEnd])
        form.setFieldsValue(data)
      })
    },

    // 确认按钮
    handleGoback() {
      this.$router.push({path: './index'})
    },
  }
}
</script>
<style lang="less" scoped>
.ant-form-item {
  .ant-form-item {
    margin-bottom: 0;
  }
}

/deep/ .ant-form-item-control {
  padding-left: 10px;

  .ant-form-item-control {
    padding-left: 0;
  }
}
</style>
